<!-- 这里写对于代码的操作选项列表，例如运行、查找错误等 -->
<script setup>
import { useCodeStore, useGptMessageStore, usePromptsStore } from '@/stores/index.js'
// import { sendQuickMsg } from '@/utils/quickFunction.js'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { debounce } from 'lodash'
import { useRuncode } from '@/hooks/useRuncode.js'

const { handleSendMsg } = useRuncode()

// 重载Python环境
const handleReloading = async () => {
  //重新加载Python环境
  console.log('reloading...')
  await codeStore.initPython()
}
// 删除对话记录
const dialogVisible = ref(false)
const promptStore = usePromptsStore()

const clearChat = () => {
  dialogVisible.value = false
  msgStore.clearMessage()
  promptStore.clearMessage()
}
// 运行代码
const codeStore = useCodeStore()
const handleRunningCode = async () => {
  // 运行代码
  await codeStore.runCode()
}
// 处理发送迅捷消息
const msgStore = useGptMessageStore()

const handleQuickSend = debounce(async (msg) => {
  // 如果不可用，则禁止点击
  if (promptStore.disabled) {
    return ElMessage({
      type: 'warning',
      message: '暂不可用，请等待'
    })
  }

  // 1. 将消息加入到消息队列中
  if (codeStore.userCode.trim() === '') {
    ElMessage({
      type: 'warning',
      message: '尚未编写代码: - )'
    })
    return
  }
  msgStore.userMsg = msg + `请注意编写的Python代码缩进一致为2个空格。这是我的代码:\n${codeStore.userCode}` 
  handleSendMsg()
  msgStore.userMsg = ''
}, 300)
</script>

<template>
  <ul class="list">
    <li>
      <myButton
        :content="'重新加载'"
        :bgc="'#fbb034'"
        @click="handleReloading"
        :disabled="promptStore.disabled"
      >
        <template #icon>
          <resetIcon :size="'20'"></resetIcon>
        </template>
      </myButton>
    </li>
    <li>
      <myButton
        :content="'运行代码'"
        :bgc="'#00a98f'"
        @click="handleRunningCode"
        :disabled="promptStore.disabled"
      >
        <template #icon>
          <runIcon :size="'20'"></runIcon>
        </template>
      </myButton>
    </li>
    <li>
      <myButton
        :content="'代码排错'"
        :bgc="'#ff4c4c'"
        @click="handleQuickSend('请帮我纠正代码中的错误!')"
        :disabled="promptStore.disabled"
      >
        <template #icon>
          <errorIcon :size="'20'"></errorIcon>
        </template>
      </myButton>
    </li>
    <li>
      <myButton
        :content="'代码优化'"
        :bgc="'#0099e5'"
        @click="handleQuickSend('请为我提出优化代码的方案!')"
        :disabled="promptStore.disabled"
      >
        <template #icon>
          <upIcon :size="'20'"></upIcon>
        </template>
      </myButton>
    </li>
    <li>
      <myButton
        :content="'模块化'"
        :bgc="'#8e43e7'"
        @click="handleQuickSend('请思考如何将我的代码进行模块化拆分!')"
      >
        <template #icon>
          <moduleIcon :size="'20'"></moduleIcon>
        </template>
      </myButton>
    </li>
    <li>
      <myButton :content="'删除对话'" :bgc="'#fd5c63'" @click="dialogVisible = true">
        <template #icon>
          <trashIcon :size="'20'"></trashIcon>
        </template>
      </myButton>
    </li>
  </ul>
  <!-- 确认删除对话框 -->
  <el-dialog v-model="dialogVisible" title="警告" width="500">
    <span>确定要删除所有对话吗？</span>
    <template #footer>
      <div>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="clearChat"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
@theme-color: #00a98f;
.list {
  position: absolute;
  top: 100px;
  right: 50px;
  z-index: 10;
  li {
    list-style-type: none;
    margin-bottom: 10px;
  }
}
</style>
